<template>
  <div v-loading="loading" class="projects">
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <User />
            </el-icon>
            <span>我参与的</span>
          </div>
        </template>
      </el-descriptions>
      <el-container class="proj-container">
        <div class="proj-wrapper" v-for="proj in projects">
          <router-link :to="`/projects/${proj.id}`">
            <el-card class="proj" shadow="hover" :body-style="style.cardBody">
              <div class="proj-head">
                <el-icon>
                  <FolderChecked />
                </el-icon>
              </div>
              <div class="proj-body">
                <div class="proj-name">{{ proj.name }}</div>
              </div>
              <div class="proj-foot">
                <div class="proj-id">No.{{ proj.id }}</div>
              </div>
            </el-card>
          </router-link>
        </div>
        <div class="proj-wrapper" v-if="CreateProjectPermissions">
          <router-link to="/projects/create">
            <el-card class="proj create-proj" shadow="hover" :body-style="style.cardBody">
              <div class="create-proj-logo">
                <el-icon class="create-proj-icon">
                  <Plus />
                </el-icon>
              </div>
              <div class="create-proj-text">
                <div>创建项目</div>
              </div>
            </el-card>
          </router-link>
        </div>
        <div class="nothing-note" v-if="projects.length <= 0 && !CreateProjectPermissions">
          暂时没有我参与的项目
        </div>
      </el-container>
    </section>
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <More />
            </el-icon>
            <span>所有项目</span>
          </div>
        </template>
      </el-descriptions>
      <el-container class="proj-container">
        <div class="proj-wrapper" v-for="proj in allProjects">
          <router-link :to="`/projects/${proj.id}`">
            <el-card class="proj" shadow="hover" :body-style="style.cardBody">
              <div class="proj-head">
                <el-icon>
                  <FolderChecked />
                </el-icon>
              </div>
              <div class="proj-body">
                <div class="proj-name">{{ proj.name }}</div>
              </div>
              <div class="proj-foot">
                <div class="proj-id">No.{{ proj.id }}</div>
              </div>
            </el-card>
          </router-link>
        </div>
      </el-container>
    </section>
  </div>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../utils/common/api'
import { getUser } from '../../utils/user'

export default {
  data() {
    return {
      projects: [
        // {
        //   id: 1,
        //   name: '项目资产管理系统'
        // }
      ],

      allProjects: [],

      style: {
        cardBody: {
          'display': 'flex',
          'flex-direction': 'column',
          'width': '100%',
          'height': '100%',
          'box-sizing': 'border-box'
        }
      },

      loading: false,
    }
  },
  computed: {
    CreateProjectPermissions() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(4)
    }
  },

  methods: {
    async getProjectsList() {
      const res = await post('/project/all', {})
      this.allProjects = res.list
    },

    async getUserProjectList(user) {
      const res = await post('/project/list', {
        uid: user.id
      })
      res.list.sort(function (a, b) {
        return parseInt(a.id) - parseInt(b.id)
      })
      this.projects = res.list
    }
  },

  mounted() {
    this.loading = true;
    let that = this;
    getUser(async function (user) {
      await that.getUserProjectList(user);
      await that.getProjectsList();
      that.loading = false;
    });
  }
}
</script>

<style scoped>
.info-container {
  padding: 20px 0;
}

.descriptions-list {
  width: 100%;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 8px;
}

.proj-container {
  flex-wrap: wrap;
}

.proj-wrapper {
  padding: 10px;
  width: 240px;
  height: 160px;
}

.proj {
  cursor: pointer;
  user-select: none;
  width: 100%;
  height: 100%;
  text-align: left;
}

.proj-el-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.proj-head {
  height: 25px;
}

.proj-body {
  flex-grow: 1;
  padding: 8px 0;
}

.proj-foot {
  height: 25px;
}

.proj-name {
  font-size: 18px;
  font-weight: 600;
}

.proj-id {
  font-size: 14px;
  color: #777777;
}

.create-proj {
  text-align: center;
}

.create-proj-logo {
  height: 60%;
}

.create-proj-icon {
  height: 100%;
  font-size: 24px;
}

.create-proj-text {
  height: 40%;
  font-size: 15px;
}

.nothing-note {
  font-size: 15px;
  color: #777777;
  margin-left: 23px;
}
</style>
